<template>
  <div>
      <div class="wrapper">
          <div class="conter">
              <div class="shop_img">
                  <img :src="storedetail.logo" alt="">
              </div>
              <p class="shop_name">{{storedetail.name}}</p>
              <div v-if="coupondetail.coupon.type == 1">
                  <h3 class="coupon_price">{{coupondetail.coupon.ratio}}折券</h3>
              </div>
              <div v-else>
                  <h3 class="coupon_price">&yen;{{coupondetail.coupon.price}}</h3>
              </div>
              <h4>{{coupondetail.coupon.name}}</h4>
              <div class="hr">
                  <div class="xiantiao">

                  </div>
              </div>
              <p class="address_txt" v-if="storedetail.address"><i class="address_icon" :style="address_icon"></i>{{storedetail.address}}</p>
              <p class="address_txt" v-if="storedetail.kf_mobile"><i class="address_phone" :style="address_phone"></i>{{storedetail.kf_mobile}}</p>
              <div class="info_box border-top-1px">
                  <p>1、可以到店使用零壹坊收款码抵扣；</p>
                  <p>2、可以直接点击使用付款；</p>
                  <p>3、平台保留优惠券解释权；</p>
              </div>
              <a href="javascript:;" class="coupon_btn" v-if="coupondetail.type == 0" @click="receiveCoupon">立即领取</a>
              <a href="javascript:;" class="coupon_btn" v-else @click="useCoupon">立即使用</a>
              <a href="javascript:;" class="coupon_btn1" @click="is_share_mark()">立即分享</a>
              <p class="bottom_txt">— 零壹新科技（深圳）有限公司 —</p>
          </div>
          <div class="cezhao" v-if="is_mark" @click="is_share_mark()">
              <img :src="share_mark" alt="">
          </div>
      </div>
  </div>
</template>
<script>

import share_mark from '@/assets/share_mark.png'
export default {
    data(){
        return {
            address_icon:{
                backgroundImage: "url(" + require("../assets/copon_details_posion@2x.png") + ")",
                backgroundRepeat: "repeat-y",
                backgroundSize: "cover"
            },
            address_phone:{
                backgroundImage: "url(" + require("../assets/copon_details_phone@2x.png") + ")",
                backgroundRepeat: "repeat-y",
                backgroundSize: "cover"
            },
            share_mark,
            storedetail:{},
            coupondetail:{},
            is_receive:false,
            is_mark:false
        }
    },
    methods:{
        //获取店铺信息
        getStoreDetail:function(){
            let that = this;
            let url = "/fang/store/get_store_info";
            let store_id = this.$route.query.store_id;
            that.$axios.post(url,this.$qs.stringify({
                store_id:store_id,
            })).then(function(response){
                let res = response.data;
                if(res.status == 1){
                  that.storedetail = res.data;
                  console.log(that.storedetail);
                }
            })
            .catch(function(error){
                console.log(error);
            });
        },
        is_share_mark(){
            this.is_mark = !this.is_mark;
        },
        //获取优惠券信息
        getCouponoDetail:function(){
            let that = this;
            let url = "/fang/store/coupon_detail";
            let coupon_id = this.$route.query.coupon_id;
            that.$axios.post(url,this.$qs.stringify({
                coupon_id:coupon_id,
                access_token:that.$store.state._token01,
            })).then(function(response){
                let res = response.data;
                if(res.status == 1){
                  that.coupondetail = res.data;
                  console.log(that.coupondetail,"sdfsdf");
                }
            })
            .catch(function(error){
                console.log(error);
            });
        },
        //检测用户是否领取优惠券
        // checkIsReceive:function(){
        //     let that = this;
        //     let url = "/fang/store/coupon_info";
        //     let coupon_id = this.$route.query.coupon_id;
        //     that.$axios.post(url,this.$qs.stringify({
        //         coupon_id:coupon_id,
        //         access_token:that.$store.state._token01,
        //     })).then(function(response){
        //         let res = response.data;
        //         if(res.status == 1){
        //           if(res.data.type==1){
        //             that.is_receive = true;
        //           }else{
        //             that.is_receive = false;
        //           }
        //         }
        //     })
        //     .catch(function(error){
        //         console.log(error);
        //     });
        // },
        //领取优惠券
        receiveCoupon:function(){
            let that = this;
            let url = "/fang/store/user_coupon";
            let coupon_id = this.$route.query.coupon_id;
            that.$axios.post(url,this.$qs.stringify({
                coupon_id:coupon_id,
                access_token:that.$store.state._token01,
            })).then(function(response){
                let res = response.data;
                if(res.status == 1){
                    that.$router.push({
                          name:'CouponList'
                      });
                }
                else if (res.status == -1) {
                    that.noLogin();
                }else{
                    that.toast = that.$createToast({
                      txt: res.msg,
                      type: 'txt'
                    })
                    that.toast.show()
                }
            })
            .catch(function(error){
                that.showToastTxtOnly(error);
            });
        },
        //使用优惠券
        useCoupon:function(){
            let url = '';
            if(/Alipay/.test(window.navigator.userAgent)) {
                url = this.$store.state.host+'/fang/scanpay/ali?store_id='+this.$route.query.store_id;
                window.location.href = url;
            }
            else if (/MicroMessenger/.test(window.navigator.userAgent)) {
                url = this.$store.state.host+'/fang/scanpay/wechat?store_id='+this.$route.query.store_id;
                window.location.href = url;
            } else {
                this.showAlert('请使用微信或支付宝支付');
            }

        },
        showAlert:function(error) {
           this.$createDialog({
             type: 'alert',
             title: '出错了',
             content: error,
             icon: 'cubeic-alert'
           }).show()
        },
        showToastTxtOnly(text) {
         this.toast = this.$createToast({
           txt: text,
           type: 'txt'
         })
         this.toast.show()
       },
    },
    components:{
    },
    computed: {

    },
    mounted() {
        // this.checkIsReceive();
    },
    beforeCreate:function(){

    },
    activated:function(){
        this.getStoreDetail();
        this.getCouponoDetail();
    },
    beforeDestroy: function() {

    }
}
</script>
<style scoped>
.wrapper{
    height: 26.68rem;
    overflow: hidden;
    background: linear-gradient(270deg,rgba(26,185,163,1),rgba(31,223,160,1));
}
.wrapper .conter{
    margin: 2.44rem .8rem 0 .8rem;
    background: #FFFFFF;
    border-radius: .64rem;
    padding: 2.88rem 0 .8rem 0;
    position: relative;
}
.wrapper .conter .shop_img{
    width: 2.88rem;
    height: 2.88rem;
    border-radius: .64rem 0px .64rem 0px;
    position: absolute;
    top: -.8rem;
    left: 50%;
    transform: translate(-50%,0);
    overflow: hidden;
    background: #FFFFFF;
}
.wrapper .conter .shop_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wrapper .conter .shop_name{
    font-size: .56rem;
    color: #292929;
    font-weight: 500;
}
.wrapper .conter .coupon_price{
    margin-top: 1.28rem;
    font-size: .96rem;
    color: #292929;
    font-weight: 600;
    margin-bottom: .2rem;
}
.wrapper .conter .hr{
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 .78rem;
}
.wrapper .conter .hr .xiantiao{
    width: 100%;
    height: .4rem;
    border-bottom: 1px dashed #AEAEAE;
}
.wrapper .conter .hr .xiantiao::after{
    content: "";
    display: block;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: #1abaa3;
    position: absolute;
    right: -.45rem;
}
.wrapper .conter .hr .xiantiao::before{
    content: "";
    display: block;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: #1fdfa0;
    position: absolute;
    left: -.45rem;
}
.wrapper .conter .address_txt{
    font-size: .56rem;
    color: #AEAEAE;
    font-weight: 500;
    text-align: left;
    padding:0 .8rem;
    margin-bottom: .8rem;
}
.wrapper .conter .address_icon{
    display: inline-block;
    width: .48rem;
    height: .56rem;
    margin-right: .36rem;
    vertical-align: middle;
}
.wrapper .conter .address_phone{
    display: inline-block;
    width: .44rem;
    height: .44rem;
    margin-right: .36rem;
    vertical-align: middle;
}
.wrapper .conter .info_box{
    margin: 0 .8rem;
    padding:.64rem .34rem;
    font-size: .56rem;
    color: #AEAEAE;
    text-align: left;
    line-height: 1.5;
}
.wrapper .conter .coupon_btn{
    display: block;
    width: 9.6rem;
    height: 1.6rem;
    background:linear-gradient(270deg,rgba(49,203,182,1),rgba(31,223,160,1));
    border-radius:.21rem;
    margin: 0 auto;
    margin-top: .6rem;
    font-size: .72rem;
    color: #FFFFFF;
    font-weight: 600;
    line-height: 1.6rem;
}
.wrapper .conter .coupon_btn1{
    display: block;
    width: 9.6rem;
    height: 1.6rem;
    background:#FFFFFF;
    border:.04rem solid rgba(31,221,160,1);
    border-radius:.21rem;
    margin: 0 auto;
    margin-top: .6rem;
    font-size: .72rem;
    color: rgba(31,221,160,1);
    font-weight: 600;
    line-height: 1.6rem;
}
.wrapper .conter .bottom_txt{
    font-size: .4rem;
    color: #AEAEAE;
    margin-top: .8rem;
    font-weight: 500;
}
.wrapper .cezhao{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    background-color: #25262d;
    opacity: .8;
}
.wrapper .cezhao img{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
}
</style>
